<template>
 <div class="yingmoo-list">
    <ym-header></ym-header>
    <ym-medianav></ym-medianav>
    <ym-detailsnav></ym-detailsnav>
<!--  当前定位  -->
    <div class="locat">
      <img src="../assets/ym-list/dw.png" />
      <p>
        当前位置：
        <span>鹰目户外广告> </span>
        <span class="text">{{areaName}}</span>
        <span v-if="areaName!=''">></span>
        <span class="text">{{cate1Name}}</span>
        <span v-if="cateName!=''">></span>
        <span class="text">{{cateName}}</span>
      </p>
    </div>
<!--  搜索导航  -->
    <div class="search-nav">
      <div class="ul" @click="shox=1">
        <p>媒体分类：</p>
        <ul>
          <li v-for="cate in mediaCate"@click="getCateList(cate.value),addMediaCode(cate.text,cate.value)" style="cursor: pointer;">{{cate.text}}</li>
        </ul>
      </div>
      <div class="ul" v-show="shox==1">
        <p>媒体类别：</p>
        <ul>
          <li v-for="cate2 in mediaCate2"@click="addTag(cate2.text,cate2.value)" style="cursor: pointer;">{{cate2.text}}</li>
        </ul>
      </div>
      <div class="ul">
        <p>区域选择：</p>
        <ul>
          <li v-for="pro in province" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
        </ul>
        <span class="sel" @click="she=1,change()"><img src="../assets/ym-header/arrows.png" /></span>
        <!--<div class="select" v-show="she==1" @mouseleave="she=0">
          <li v-for="pro in province" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
          <li v-for="pro in province" @click="addAreaCode(pro.text,pro.value)" style="cursor: pointer;">{{pro.text}}</li>
        </div>-->
      </div>
      <div class="searches">
        <div class="search-text">
          <img src="../assets/ym-details/search.png" />
          <input v-model="key" type="text" />
        </div>
        <div class="search" @click="searchByKey" style="cursor: pointer;">关键字搜索</div>
      </div>
      <div class="search-condition">
        <p>搜索条件</p>
        <el-tag
          v-for="tag in tags"
          :key="tag.name"
          :closable=true
          :type="tag.type">
          {{tag.name}}
        </el-tag>
      </div>
    </div>
<!--  默认顺序、点击量、创建时间  -->
    <div class="tab">
      <ul class="tab-nav">
        <li @mouseenter='shos=1'>默认顺序</li>
        <li @mouseenter='shos=0,shon=1'>点击量</li>
        <li @mouseenter='shos=0,shon=0,shom=1'>创建时间</li>
      </ul>
    </div>
<!--  列表模板  -->
    <div class="list-models">
      <div class="model-left">
        <div class="list-model" v-for="media in mediaList">
          <a :href="media.linkUrl" target="_blank">
          	<img width="304px" height="200px" :src="media.cover" />
          </a>
          <div class="firm-name" :title="media.companyName">
          	<a :href="media.linkUrl" target="_blank" style="color: white;">{{media.companyName}}</a>
          </div>
          <div class="name">
          	<p><h4>{{media.media_name}}</h4></p>
<!--        <p>公司名称： <span>{{media.mediaCompanyName}}</span></p>-->
            <p>媒体分类： <span>{{media.category}}</span></p>
            <p>免费咨询热线： <span class="colors">400-650-7893</span></p>
            <p>刊例价： <span class="colors">{{media.prices}}{{media.light_style_id}}</span></p>
            <button class="hot" @click="addAttention(media.media_id),tur()" :class="{'hot-color':tru}">关注</button>
            <button class="shop" @click="addToCart(media.media_id,media.mediaType)">加入购物车</button>
          </div>
          <div class="locats">
            <p>地区： <span>{{media.area}}</span></p>
            <p class="map-text"><img src="../assets/ym-list/earth.png" /><span>地图</span></p>
          </div>
        </div>
      </div>

      <div class="model-right">
        <div class="hot">
          <h4>热门媒体</h4>
          <div class="small-model" v-for="hot in hotMediaList">
            <img width="225px" height="147px" :src="hot.cover" />
            <p :title="hot.mediaName">{{hot.mediaName}}</p>
            <p class="price" :title="hot.prices">价格：￥{{hot.prices}}</p>
            <p class="path" :title="hot.address">位置：{{hot.address}}</p>
          </div>
        </div>
        <div class="about-media">
          <h4>媒体相关店铺</h4>
          <div class="company" v-for="shop in relatedShop">
            <img width="222px" height="198px" :src="shop.contentLicense"/>
            <p :title="shop.contentCorp">{{shop.contentCorp}}</p>
          </div>
        </div>
        <div class="about-nav">
          <h4>相关导航<span>换一组</span></h4>
          <p>福州LED大屏广告    扬州商住楼宇媒体广告    济南公交站牌灯箱广告   延安机场大牌大牌广告    <span>南京机场大牌广告</span>    武汉机场大牌广告    北京LED广告    沈阳LED大屏广告    深圳户外广告    地铁广告报价    北京户外广告    成都户外广告    平凉看板广告    佳木斯立柱单立柱广告    成都机场大牌广告    佳木斯立柱单立柱广告    成都机场大牌广告</p>
        </div>
      </div>
    </div>
<!--  分页器  -->
    <div class="paging">
      <el-pagination
      	@current-change="getMediaList(currentPage3,15)"
        :current-page.sync="currentPage3"
        :page-size="15"
        background
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

<!--  推荐媒体  -->
    <div class="yingmoo-column yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">推荐媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="media in recommentMedia">
          <dt>
          	<a :href="media.linkUrl" target="_blank">
            <img width="222px" height="145px" :src="media.cover" />
            </a>
          </dt>
          <dd class="media-text-first" :title="media.mediaName">{{media.mediaName}}</dd>
          <dd class="media-text-secend">￥{{media.prices}}{{media.lightStyleId}}</dd>
          <!--<dd class="media-text-city">{{n.modelcity}}<span>{{n.modellook}}</span></dd>-->
        </dl>
      </div>
    </div>
   <ym-detailsfooter></ym-detailsfooter>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymDetailsfooter from "@/components/ymDetailsfooter.vue";
  import ymDetailsnav from "@/components/ymDetailsnav.vue";
  export default {
    name: "yingmoo-list",
    components: {
      ymHeader,
      ymMedianav,
      ymDetailsnav,
      ymDetailsfooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
      	user:{},
        shos: 1,
        shon: 0,
        shom: 0,
        tru: true,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        total:0,
        mediaCate:[],
        mediaCate2:[],
        mediaList:[],
        hotMediaList:[],
        relatedShop:[],
        shoplist:[],
        recommentMedia:[],
        cate1Name:'',
        cateName:'',
        areaName:'',
        province:[],
        tags1:[],
        tags2:[],
        tags:[],
        params:{},
        key:'',
        she: 0,
        shox: 0,
        param:null,
        showCate:{}
      }
    },
    mounted(){
    	this.getMediaList(1,15);
    	this.getCateList('');
    	this.getCateList('1001');
    	this.getAreaList('');
    },
    methods:{
      tur:function(){
        this.tru = !this.tru
      },
    	getMediaList:function (offset,limit){
    		this.user = JSON.parse(window.localStorage.getItem("user"));
    		this.params = JSON.parse(sessionStorage.getItem("params"));
    		this.params.offset = (offset-1)*limit;
    		this.params.limit = limit;
    		this.currentPage3 = offset; 
    		this.$http.post(this.requestAddr+"/GetJson/getMediaList",this.params,{emulateJSON:true}).then(
    			(res)=>{
    				this.mediaList = res.data.mediaList;
    				console.log(this.mediaList)
    				this.total = res.data.total;
    				this.hotMediaList = res.data.hotMedia;
    				this.relatedShop = res.data.relatedShop;
    				this.recommentMedia = res.data.recommentMedia;
    				for(var i=0; i<this.mediaList.length; i++){
		            	this.mediaList[i].create_time = this.dateConvertor(this.mediaList[i].create_time);
		            	this.mediaList[i].linkUrl = "http://172.16.10.4:7000/html/mediaData/"+this.mediaList[i].create_time+"/"+this.mediaList[i].media_id+".html";
    				}
					for (var i=0; i<this.recommentMedia.length;i++) {
						this.recommentMedia[i].createTime = this.dateConvertor(this.recommentMedia[i].createTime)
						this.recommentMedia[i].linkUrl = "http://172.16.10.4:7000/html/mediaData/"+this.recommentMedia[i].createTime+"/"+this.recommentMedia[i].mediaId+".html";
					}
    			}
    		)
    	},
    	//添加关注
    	addAttention:function(id){
    		this.$http.post(this.requestAddr+"/GetJson/addAttention",{"userId":this.user.autoId,"mediaId":id,"type":1},{emulateJSON:true}).then(
    			(res)=>{
    				if(res.data.code==0){
    					alert(res.data.msg);
    				}
    			}
    		)
    	},
    	//添加到我的购物车
    	addToCart:function(id,type){
    		this.$http.post(this.requestAddr+"/GetJson/addToCart",{"advertiserId":this.user.autoId,"mediaId":id,"mediaType":type},{emulateJSON:true}).then(
    			(res)=>{
    				if(res.data.code==0){
    					alert(res.data.msg);
    				}
    			}
    		)
    	},
    	//获取分类信息
    	getCateList:function(code){
    		this.$http.post(this.requestAddr+"/GetJson/getCategoryList",{"parentCode":code},{emulateJSON: true}).then(
    			(res)=>{
    				if(code == null || code == ''){
						this.mediaCate = res.data.result;
					}else if(code != null && code.length == 4){
						this.mediaCate2 = res.data.result;
					}
					for(var i=0; i<(this.mediaCate).length; i++){
						if((this.params.categoryCode).substring(0,4)==this.mediaCate[i].value){
							this.cate1Name = this.mediaCate[i].text;
						}
					}
					for(var i=0; i<(this.mediaCate2).length; i++){
						if(this.params.categoryCode==this.mediaCate2[i].value){
							this.cateName = this.mediaCate2[i].text;
						}
					}
    			}
    		)
    	},
    	//获取地区列表
    	getAreaList:function(areaCode){
			this.$http.post(this.requestAddr+"/GetJson/getAreaList",{"parentCode":areaCode},{emulateJSON: true}).then(
				(res)=>{
					if(areaCode == null || areaCode == ''){
						this.province = (res.data.result);
					}else if(areaCode != null && areaCode.length == 4){
						this.citys = res.data.result;
					}else{
						this.areas = res.data.result;
					}
					for(var i=0; i<(this.province).length; i++){
						if(this.params.mediaArea==this.province[i].value){
							this.areaName = this.province[i].text;
						}
					}
				}
			);
		},
		addTag:function(text,value){
			if(value.length == 4){
				this.tags1 = [];
				this.cate1Name = text;
				this.cateName = '';
			}else{
				this.cateName = text;
			}
			this.tags = [];
			var tag = {
				name : text,
				type : 'warning'
			}
			this.tags1.push(tag);
			this.tags.push.apply(this.tags,this.tags1);
			this.tags.push.apply(this.tags,this.tags2);
			this.params.offset = 1;
			this.params.limit = 15;
			this.currentPage3 = 1;
			this.search();
		},
		addMediaCode:function(text,value){
			this.params.categoryCode = value;
			this.addTag(text,value);
		},
		addAreaCode:function(text,value){
			this.areaName = text; 
			this.tags2 = [];
			this.tags = [];
			var tag = {
				name : text,
				type : 'warning'
			}
			this.tags2.push(tag);
			this.tags.push.apply(this.tags,this.tags1);
			this.tags.push.apply(this.tags,this.tags2);
			this.params.mediaArea = value;
			this.search();
		},
		//关键字搜索
		searchByKey:function(){
			this.params.key = this.key;
			this.search();
		},
		search:function(){
			console.log(this.params)
			this.$http.post(this.requestAddr+"/GetJson/getMediaList",this.params,{emulateJSON:true}).then(
    			(res)=>{
    				this.mediaList = res.data.mediaList;
    				this.total = res.data.total;
    				this.hotMediaList = res.data.hotMedia;
    				this.relatedShop = res.data.relatedShop;
    				this.recommentMedia = res.data.recommentMedia;
    			}
    		)
		},
		dateConvertor:function(dateTime){
			var date = new Date(dateTime);
			var month = (date.getMonth()+1)<10 ? '0'+ (date.getMonth()+1):(date.getMonth()+1)
			var dd = date.getDate()<10 ? '0'+ date.getDate():date.getDate()
        	var str=date.getFullYear() + '/' + month + '/' + dd
        	return str;
		}
    }
  }
</script>

<style scoped>
  .el-tag {
    margin-right: 10px;
  }
</style>

<style scoped lang="less">
  .yingmoo-list {
    width: 100%;
    background-color: #f3f9ff;
    .locat {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      img {
        width: 10px;
        height: 14px;
        margin-top: 19px;
        margin-right: 5px;
      }
      p {
        font-size: 12px;
        line-height: 50px;
        color: #666666;
        font-weight: bold;
        span {
          font-weight: 1;
        }
        .text {
          color: #f29600;
        }
      }
    }
    .search-nav {
      width: 1200px;
      margin: 0 auto;
      .ul {
        width: 1200px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        background-color: white;
        margin-top: 15px;
        display: flex;
        position: relative;
        p {
          width: 135px;
          height: 40px;
          background-color: #036eb7;
          color: white;
        }
        ul{
          width: 1040px;
          li {
            padding-left: 16px;
            padding-right: 17px;
            float: left;
            color: #666666;
          }
        }
        .sel{
          cursor: pointer;
        }
        .select{
          width: 1065px;
          position: absolute;
          top: 40px;
          padding-left: 135px;
          background-color: white;
          li {
            padding-left: 16px;
            padding-right: 17px;
            float: left;
            color: #666666;
            list-style: none;
          }
        }

      }
      .searches {
        width: 420px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        background-color: white;
        margin: 12px 0 12px 0;
        .search-text {
          width: 315px;
          height: 40px;
          display: flex;
          img {
            width: 27px;
            height: 26px;
            margin: 8px 0 0 10px;
          }
          input {
            width: 280px;
            height: 38px;
            border: none;
            outline: none;
            padding-left: 10px;
            font-size: 14px;
          }
        }
        .search {
          width: 105px;
          height: 40px;
          background-color: #f29600;
          line-height: 40px;
          color: white;
          text-align: center;
        }
      }
      .search-condition {
        display: flex;
        p {
          font-size: 16px;
          font-weight: bold;
          color: #666666;
          line-height: 30px;
          margin-right: 10px;
        }
      }
    }
    .tab {
      width: 1200px;
      margin: 20px auto;
      .tab-nav {
        display: flex;
        width: 1200px;
        height: 40px;
        background-color: white;
        li {
          width: 135px;
          height: 40px;
          border: 1px solid #e6e6e6;
          color: #666666;
          line-height: 40px;
          text-align: center;
          background-color: white;
          &:hover {
            color: white;
            background-color: #036eb7;
            border: 1px solid #036eb7;
          }
          &:nth-child(1) {
            border-right: none;
          }
          &:nth-child(2) {
            border-right: none;
          }
        }
      }
    }
    .list-models {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .model-left {
        .list-model {
          width: 950px;
          height: 200px;
          background-color: white;
          display: flex;
          margin-bottom: 20px;
          position: relative;
          .firm-name{
            width: 304px;
            position: absolute;
            bottom: 0px;
            height: 30px;
            line-height: 30px;
            background-color: black;
            opacity: 0.6;
            overflow: hidden;
            text-overflow: clip;
            text-align: center;
            cursor: default;
            color: white;
          }
          .name {
            width: 290px;
            height: 200px;
            margin-left: 25px;
            padding-top: 15px;
            h4 {
              font-size: ;
              font-weight: bold;
              margin-bottom: 15px;
              white-space:nowrap;
			  overflow:hidden;
			  text-overflow:ellipsis;
            }
            p {
              font-size: 14px;
              line-height: 30px;
              color: #999999;
              white-space:nowrap;
			  overflow:hidden;
			  text-overflow:ellipsis;
              .colors {
                color: #f29600;
                font-weight: bold;
              }
              span{
              	white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
              }
            }
            button {
              width: 130px;
              height: 40px;
              border: none;
              font-size: 14px;
              margin-top: 15px;
            }
            .hot {
              background-color: #e6e6e6;
              color: #999999;
              background-image: url(../assets/ym-details/hot.png);
              background-repeat: no-repeat;
              background-position: 30% center;
              text-align: center;
              padding-left: 30px;
              cursor: pointer;
              &:hover {
                background-image: url(../assets/ym-details/hot-hover.png);
                color: #f29600;
              }
            }
            .hot-color{
              background-color: #e6e6e6;
              background-image: url(../assets/ym-details/hot-hover.png);
              color: #f29600;
              background-repeat: no-repeat;
              background-position: 30% center;
              text-align: center;
              padding-left: 30px;
            }
            .shop {
              background-color: #f29600;
              color: white;
              background-image: url(../assets/ym-details/shop.png);
              background-repeat: no-repeat;
              background-position: 15% center;
              text-align: center;
              padding-left: 30px;
              cursor: pointer;
              &:hover {
                background-color: #bf7d1f;
              }
            }
          }
          .locats {
            margin-top: 50px;
            p {
              font-size: 14px;
              line-height: 30px;
              color: #999999;
              width:280px;
              	white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
              .colors {
                color: #f29600;
                font-weight: bold;
              }

            }
            .map-text {
              span {
                position: relative;
                top: -15px;
              }
            }
          }
        }
      }
      .model-right {
        width: 225px;
        height: 770px;
        .hot {
          h4 {
            font-size: 20px;
            border-bottom: 3px solid #036eb7;
            line-height: 38px;
            color: #036eb7;
            font-weight: bold;
          }
          .small-model {
            width: 225px;
            height: 230px;
            background-color: white;
            margin-top: 20px;
            img {
              width: 100%;
            }
            p {
              height: 25px;
              font-size: 15px;
              color: #333333;
              line-height: 25px;
              overflow: hidden;
              text-overflow: clip;
              padding-left: 10px;
            }
            .price {
              font-size: 13px;
              color: #f29600;
            }
            .path {
              font-size: 13px;
              color: #999999;
            }
          }
        }
        .about-media{
          margin-top: 25px;
          h4 {
            font-size: 20px;
            border-bottom: 3px solid #036eb7;
            line-height: 38px;
            color: #036eb7;
            font-weight: bold;
          }
          .company{
            width: 222px;
            height: 238px;
            text-align: center;
            border: 1px solid #dddddd;
            margin-top: 20px;
            p{
              height: 40px;
              line-height: 40px;
              border-top: 1px solid #dddddd;
              color: #333333;
              overflow: hidden;
              text-overflow: clip;
            }
          }
        }
        .about-nav{
          margin-top: 20px;
          h4 {
            font-size: 20px;
            border-bottom: 3px solid #036eb7;
            line-height: 38px;
            color: #036eb7;
            font-weight: bold;
            span{
              padding-left: 103px;
              color: #999999;
              font-weight: 100;
              font-size: 14px;
            }
          }
          p{
            color: #999999;
            font-weight: 100;
            font-size: 14px;
            line-height: 30px;
            margin-top: 12px;
            span{
              color: #f29600;
            }
          }
        }
      }
    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
    .yingmoo-xxx {
      width: 1200px;
      height: 300px;
      margin: 0 auto;
      background-color: transparent;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 235px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 15px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow: clip;
            cursor: default;
          }
          .media-text-secend {
            font-size: 12px;
            color: #f29600;
            cursor: default;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
            span {
              padding-left: 15px;
            }
          }
        }
      }
    }
  }

</style>
